import 'package:bruno/bruno.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';


import '../../AppConfig/Config.dart';
import '../../AppConfig/RouteAct.dart';
import '../../l10n/messages.dart';
import 'AddbankCard.dart';
import 'BankCardList.dart';

class RechargeView extends StatefulWidget {
  const RechargeView({super.key});

  @override
  State<RechargeView> createState() => _RechargeViewState();
}

class _RechargeViewState extends State<RechargeView> {
  int payType =-1;
  int cardIndex=1;
  @override
  Widget build(BuildContext context) {
    var messages = AppLocalizations.of(context)!;
    final screenSize = MediaQuery.of(context).size;
    return Scaffold(
      backgroundColor: MyColors.backgreyColor,
      appBar: AppBar(
        backgroundColor: Colors.white,
        centerTitle: true,
        leading: IconButton(
          icon: Icon(Icons.arrow_back_ios, color: Colors.black),
          onPressed: () => Navigator.of(context).pop(),
        ),
        title: Text(messages['充值'],style: TextStyle(color: Colors.black,fontWeight: FontWeight.w300,fontSize: 16.sp),),
      ),
      body: ListView(
        children: [
          Container(
            height: 400.h,
            child:Stack(
              children: [
                Container(
                  padding: EdgeInsets.only(top: 20.h,left: 10.w),
                  height: 220.h,
                  width: screenSize.width,
                  color: MyColors.themeColor,
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text("可用余额（元）",style: TextStyle(fontWeight: FontWeight.w600,color: Colors.white,fontSize: 13.sp),),
                      SizedBox(height:12.h ,),
                      Row(
                        crossAxisAlignment: CrossAxisAlignment.end,
                        children: [
                          Column(
                            children: [
                              Text("¥",style: TextStyle(fontWeight: FontWeight.w600,fontSize: 16.sp,color: Colors.white),),
                              SizedBox(height: 8.h,),
                            ],
                          ),

                          Text("50.00",style: TextStyle(fontWeight: FontWeight.w600,fontSize: 40.sp,color: Colors.white),),
                        ],
                      ),
                    ],
                  ),
                ),
                Positioned(
                  top:107.h,
                  child: Container(
                    padding: EdgeInsets.only(left: 15.w,right: 15.w,top: 15.h),
                    margin: EdgeInsets.only(left: 15.w,right: 15.w),
                    width: MediaQuery.of(context).size.width-30.w,
                    height: 300.h,
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.all(Radius.circular(10)),
                      color: Colors.white,
                    ),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text("充值金额",style: TextStyle(color: Colors.black,fontSize: 16.sp),),
                        SizedBox(height: 20.h,),
                        Row(
                          crossAxisAlignment: CrossAxisAlignment.end,
                          children: [

                            Text("¥",style: TextStyle(color: Colors.black,fontSize: 42.sp,),),
                            SizedBox(width: 10.w,),
                            Container(
                              width: 200.w,
                              height: 30.h,
                              child:  TextField(
                                decoration: InputDecoration(
                                  hintText: '请输入金额',
                                  hintStyle:TextStyle(fontSize: 20.sp,color: MyColors.hintColor),
                                  filled: true,
                                  fillColor: Colors.white,
                                  border: InputBorder.none,
                                  alignLabelWithHint: true,
                                  // contentPadding: EdgeInsets.symmetric(vertical: 6.0.h, horizontal: 0.0.w),
                                ),
                                keyboardType: TextInputType.number,
                                textAlign: TextAlign.left,
                                style: TextStyle(color: Colors.black,fontSize: 20.sp),
                                onChanged: (value) {
                                  setState(() {
                                    print(value);
                                  });
                                },
                              ),
                            ),
                          ],
                        ),
                        SizedBox(height: 8.h,),
                        Container(
                          height: 1.h,
                          color: MyColors.backgreyColor,
                        ),
                        SizedBox(height: 10.h,),
                        Text("充值方式",style: TextStyle(color: MyColors.textColor,fontSize: 14.sp),),
                        Divider(height: 10.h,color: MyColors.backgreyColor,),
                        GestureDetector(
                          child:Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: [
                              Row(
                                children: [
                                  Image.asset("lib/Images/PersonCenter/充值方式支付宝icon.png",width: 24.w,height: 24.h,),
                                  SizedBox(width: 2.w,),
                                  Text("支付宝",style: TextStyle(color: Colors.black,fontSize: 13.sp),),
                                ],
                              ),
                              Icon(payType==1?Icons.check_circle: Icons.panorama_fish_eye,color:payType==1?MyColors.themeColor:MyColors.hintColor ,)
                            ],
                          ),
                          onTap: (){
                            setState(() {
                              payType=1;
                            });
                          },
                        ),

                        Divider(height: 10.h,color: MyColors.backgreyColor,),
                        GestureDetector(
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: [
                              Row(
                                children: [
                                  Image.asset("lib/Images/PersonCenter/充值方式微信icon.png",width: 24.w,height: 24.h,),
                                  SizedBox(width: 2.w,),
                                  Text("微信",style: TextStyle(color: Colors.black,fontSize: 13.sp),),
                                ],
                              ),
                              Icon(payType==2?Icons.check_circle: Icons.panorama_fish_eye,color:payType==2?MyColors.themeColor:MyColors.hintColor ,)

                            ],
                          ),
                          onTap: (){
                            setState(() {
                              payType=2;
                            });
                          },
                        ),

                        Divider(height: 10.h,color: MyColors.backgreyColor,),
                        GestureDetector(child: Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            Row(
                              children: [

                                Image.asset("lib/Images/PersonCenter/中国银行icon.png",width: 24.w,height: 24.h,),
                                SizedBox(width: 2.w,),
                                Text("中国银行储蓄卡(1234)",style: TextStyle(color: Colors.black,fontSize: 13.sp),),
                              ],
                            ),
                            Icon(payType==3?Icons.check_circle: Icons.panorama_fish_eye,color:payType==3?MyColors.themeColor:MyColors.hintColor ,),
                          ],
                        ),
                          onTap: (){
                            setState(() {
                              payType=3;
                            });
                          },
                        ),

                        Divider(height: 10.h,color: MyColors.backgreyColor,),
                        GestureDetector(
                          child:Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: [
                              Text("其他付款方式",style: TextStyle(color: Colors.black,fontSize: 13.sp),),
                              Row(
                                children: [
                                  Text("其他银行卡、绑定新卡",style: TextStyle(color: MyColors.textColor,fontSize: 12.sp),),
                                  Icon(Icons.arrow_forward_ios,color: MyColors.textColor,size: 14,),
                                ],
                              )
                            ],
                          ),
                          onTap: (){
                            showModalBottomSheet(
                                context: context,
                                builder: (BuildContext context) {
                                  return Container(
                                    padding: EdgeInsets.only(top: 10.h,left: 10.w,right: 10.w),
                                    height: 300.h,
                                    width: screenSize.width,
                                    decoration: BoxDecoration(
                                        color:Colors.white,
                                        borderRadius: BorderRadius.all(Radius.circular(10))),
                                    child: Column(
                                      children: [
                                        Row(
                                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                          children: [
                                            SizedBox(width: 15.w,),
                                            Text("选择银行卡",style: TextStyle(color: Colors.black,fontSize: 16.sp),),
                                            IconButton(onPressed: (){Navigator.pop(context);}, icon: Icon(Icons.close,color: MyColors.textColor,size: 30,)),
                                          ],
                                        ),
                                        Divider(height: 16.h,color: MyColors.backgreyColor,),
                                        Container(
                                          height: 135.h,
                                          child: ListView.builder(
                                              itemCount: 3,
                                              itemBuilder: (context, index) {
                                                return GestureDetector(
                                                  child:  Column(
                                                    children: [
                                                      Row(
                                                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                                        children: [
                                                          Row(
                                                            children: [
                                                              Image.asset("lib/Images/PersonCenter/中国银行icon.png",width: 30.w,height: 30.h,),
                                                              SizedBox(width: 8.w,),
                                                              Text("中国银行储蓄卡(1234)",style: TextStyle(color: MyColors.textColor,fontSize: 16.sp),),
                                                            ],
                                                          ),
                                                          if( cardIndex==index)  Icon(Icons.check_circle,color: MyColors.themeColor,),
                                                        ],
                                                      ),
                                                      Divider(height: 16.h,color: MyColors.backgreyColor,),
                                                    ],
                                                  ),
                                                  onTap: (){
                                                    setState(() {
                                                      cardIndex=index;
                                                      Navigator.pop(context);
                                                    });
                                                  },
                                                );
                                              }
                                          ),
                                        ),
                                        GestureDetector(
                                          child: Container(
                                            child:  Row(
                                              children: [
                                                Icon(Icons.control_point,color: MyColors.textColor,),
                                                Text("添加银行卡",style: TextStyle(color: MyColors.textColor,fontSize: 14.sp),),
                                              ],
                                            ),
                                          ),
                                          onTap: (){
                                            Navigator.pop(context);
                                            Navigator.push( context, FadeRoute(page:AddBankCard()));
                                          },
                                        )

                                      ],
                                    ),
                                  );
                                }
                            );
                          },
                        )

                      ],


                    ),
                  ),
                ),
              ],
            ),
          ),
          GestureDetector(
            child:  Container(
              margin: EdgeInsets.only(left: 20.w,right: 20.w,top: 40.h),
              height: 35.h,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.all(Radius.circular(30)),
                color: MyColors.themeColor,),
              child: Center(
                child: Text("充值",style: TextStyle(color: Colors.white,fontWeight: FontWeight.w600,fontSize: 16.sp),),
              ),
            ),
            onTap: (){

            },
          ),

        ],
      ),
    );
  }
}
